<template>
	<view>
		<!--  #ifndef MP-WEIXIN || MP-ALIPAY -->
		<view>
			<!-- <view class="cu-form-group">
				<view class="title">手机号</view>
				<input placeholder="请输入手机号" class="text-left" v-model="form.phone"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">验证码</view>
				<input placeholder="请输入验证码" class="text-left" v-model="form.code"></input>
				<button class='cu-btn bg-green shadow'
					@tap="getCode">{{!captchaTime?'获取验证码':captchaTime+'秒重新获取'}}</button>
			</view> -->
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input placeholder="请输入手机号" class="text-left" v-model="form.phone"  autocomplete="off" @blur="validatePhone"></input>
				<view v-if="phoneError" class="validation-error">{{ phoneError }}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">密码</view>
				<input placeholder="请输入密码" type="password" class="text-left" v-model="form.password"  autocomplete="off" @blur="validatePasswoed"></input>
				<view v-if="passwordError" class="validation-error" >{{ passwordError }}</view>
			</view>
			<view class="zcStyle">
				<button class="cu-btn shadow-blur block newMar margin-tb-sm bottom-btn" style="margin-top: 28px;" :class="'bg-'+ theme.themeColor"
					@tap="login">注册</button>
			</view>
		</view>
		<!--  #endif -->

		
	</view>
</template>

<script>
	import validate from '@/utils/validate';
	import store from '@/store';
	import {
		sendSmsCode
	} from '@/api/smscode.js';
	import {
		register
	} from '@/api/login.js';
	import regMix  from '@/mixins/regular.js'
	export default {
		mixins: [regMix],
		data() {
			return {
				theme: getApp().globalData.theme,
				form: {},
				tips: '',
				captchaTime: 0,
				timer: null
			};
		},
		props: {
			redirectUrl: { //重定向页面
				type: String,
				default: '/pages/home/index'
			}
		},

		methods: {
			/**
			 * 发送验证码
			 */
			getCode() {
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				if (!validate.validateMobile(this.form.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				if (this.captchaTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: 'none'
					})
					return;
				} else {
					sendSmsCode(this.form).then(res => {
						uni.showToast({
							title: '验证码已发送',
							icon: 'none',
							duration: 3000
						});
						// 通知验证码组件内部开始倒计时
						this.captchaTime = 60;
						this.timer = setInterval(() => {
							this.captchaTime--;
							console.log(this.captchaTime)
							if (this.captchaTime < 1) {
								clearInterval(this.timer);
								this.captchaTime = 0
							}
						}, 1000)
					});

				}
			},
			/**
			 * 登录方法
			 */
			async login() {

				const passwordError = validate.validatePassword(this.form);
				if (!this.form.phone) {
					this.phoneError = '请输入手机号';
				}
				if (!this.form.password) {
					this.passwordError = '请输入密码';
					return;
				}
				if (!validate.validateMobile(this.form.phone)) {
					this.phoneError = '请输入正确的手机号';
					return;
				}
				
				const { data,code } = await register(this.form)
				
				console.log(code)
				
				if(code === -1){
					const paswrd = store.getters.errorMessage
					const userErr = store.getters.errorUserName
					if(userErr){
						this.phoneError = userErr
					}else if(paswrd){
						this.passwordError = paswrd
					}
				}
				
				if(data === true){
					uni.showToast({
						title: '注册成功',
						icon: 'none',
						duration: 3000
					});
					
					this.$store.dispatch("UserPwdLogin", this.form).then(() => {
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 3000
						});
						uni.reLaunch({
							url: this.redirectUrl ? decodeURIComponent(this.redirectUrl) : '/pages/home/index',
							success: () => {
								let page = getCurrentPages().pop();
								if (page) {
									page.onLoad(page.options); //执行上个页面的方法
								};
							}
						});
					}).catch(() => {})
					
					this.form = {}
					
				}
				
				
				
				// console.log(data)
				
				// this.$store.dispatch("SmsLogin", this.form).then(() => {
				// 	uni.showToast({
				// 		title: '登录成功',
				// 		icon: 'none',
				// 		duration: 3000
				// 	});
				// 	uni.reLaunch({
				// 		url: this.redirectUrl ? decodeURIComponent(this.redirectUrl) : '/pages/home/index',
				// 		success: () => {
				// 			let page = getCurrentPages().pop();
				// 			if (page) {
				// 				page.onLoad(page.options); //执行上个页面的方法
				// 			};
				// 		}
				// 	});
				// }).catch(() => {})

			},
			
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
	}
</script>

<style lang="scss">
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.validation-error {
	  color: red;
	  font-size: 12px;
	}
</style>